<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 1下载倒入Vue -->
</head>

<body>
    <div id="app">
        <h2>双大括号表达式</h2>
        <p>{{ name }}</p>
        <!--大写写法-->
        <p>{{msg.toUpperCase()}}</p>
        <p v-text="msg"></p>
        <p v-html="msg"></p>
        <input type="text" v-model="msg">
<br>
        <h2>>强制数据绑定--></h2>
        <img src="imgUrl" >
        <img v-bind:src="imgUrl">
        <img :src="imgUrl">
        <br>
      <h2>绑定监听事件</h2>
        <button v-on:click="test">test1</button>
        <button @click="test2(msg)">test2</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //Vue是一个Vue.js库提供的构建函数
        //2创建一个Vue的实例对象
        let vue = new Vue({//配置对象（属性名必须是指定的一些名称）
            //告诉VUE实例对象将来需要控制街面上的哪个区域
            el: '#app', //选择器字符串 表明将页面的哪个元素交给Vue管理
            //4告诉Vue实例对象被控制的区域的数据是什么
            data: {
                name: "didi",
                msg:'<a href="http:/www.atguigu.com">shcusc</a>',
                imgUrl:'https://lh3.googleusercontent.com/frsBSB812N3lty03SJsVY6zR1Y6uqYKb4vISAjRJ8LR2pNpYYmY5iHLBUpctVd29tjEEGPcU0_-RhQSUI3Ru2sGb8Q=w128-h128-e365-rj-sc0x00ffffff'
            },
            //所有监听事件都写在methods里面
            methods:{
                test(){
                    alert('狄狄你好可爱')
                },
                test2(content){
                    alert(content)
                }
            }
        });
        //MVVM：  model：模型数据对象  View:视图，模版页面  viewModel：视图模型（vue的实例）

    </script>
</body>

</html>